<template>
  <div class="app-container">
    <el-form :model="queryParam" ref="queryForm" size="small" :inline="true"  label-width="68px">
      <el-form-item label="部门名称" prop="name">
        <el-input
          v-model="queryParam.name"
          placeholder="请输入部门名称"
          clearable
          style="width: 240px"
          @keyup.enter.native="btnSearch"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="btnSearch">搜索</el-button>
      </el-form-item>
    </el-form>


    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPerm="['system:dept:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPerm="['system:dept:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPerm="['system:dept:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPerm="['system:dept:export']"
        >导出</el-button>
      </el-col>

      <el-col :span="1.5">
          <el-button
            type="info"
            plain
            icon="el-icon-sort"
            size="mini"
            @click="toggleExpandAll"
          >展开/折叠</el-button>
        </el-col>
    </el-row>


    <el-table
         ref="table"
          v-loading="loading"
          :data="tableData"
          row-key="id"
          :default-expand-all="isExpandAll"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column prop="name" label="部门名称" width="260"></el-table-column>
          <el-table-column label="级别" align="center">
           <template slot-scope="scope">
              <el-tag>{{scope.row.level===1?'中央':'地方'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="200"> </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPerm="['system:dept:edit']"
              >修改</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-plus"
                @click="handleAdd(scope.row)"
                v-hasPerm="['system:dept:add']"
              >新增</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPerm="['system:dept:remove']"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

  </div>
</template>

<script>
  import {dataListApi, addApi, editApi,deleteApi, findByIdApi,} from '@/api/dept.js'
  import PageMinix from '@/mixin/PageMixin.js'
  import AddOrEditMixin from '@/mixin/AddOrEditMixin.js'
  export default {
    mixins: [ PageMinix, AddOrEditMixin],
    data() {
      return {
        fetchDataApi: dataListApi,
        addApi: addApi,
        editApi: editApi,
        deleteByIdApi: deleteApi,
        findByIdApi: findByIdApi,
        primaryKey: 'id',
        tableType: 'tree',
        tableData:[],
        // 表单校验
        rules: {
          username: [
            { required: true, message: "部门名称不能为空", trigger: "blur" }
          ]
        }
      }
    },
    methods: {    
     initFormValue() {
       this.form = {
       }
     },
     // 导出excel
     handleExport(){

     },

    },
    created(){
      this.initFormValue()
    }
  }
</script>
<style>
</style>
